<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="css/personalcenter.css">
</head>
<body>
    <div class="container">
        <!-- 左侧个人信息卡片 -->
        <div class="info-card">
            <h2>个人信息</h2>
            <div class="avatar-container">
                <img src="default-avatar.jpg" alt="头像" class="avatar">
            </div>
            <div class="info-list">
                <div class="info-item">
                    <i class="icon user-icon"></i>
                    <span class="label">用户名称</span>
                    <span class="value">admin</span>
                </div>
                <div class="info-item">
                    <i class="icon phone-icon"></i>
                    <span class="label">手机号码</span>
                    <span class="value">15888888888</span>
                </div>
                <div class="info-item">
                    <i class="icon email-icon"></i>
                    <span class="label">用户邮箱</span>
                    <span class="value">ry@163.com</span>
                </div>
                <div class="info-item">
                    <i class="icon dept-icon"></i>
                    <span class="label">所属部门</span>
                    <span class="value">研发部门/董事长</span>
                </div>
                <div class="info-item">
                    <i class="icon role-icon"></i>
                    <span class="label">所属角色</span>
                    <span class="value">超级管理员</span>
                </div>
                <div class="info-item">
                    <i class="icon time-icon"></i>
                    <span class="label">创建日期</span>
                    <span class="value">2024-06-30 11:27:11</span>
                </div>
            </div>
        </div>

        <!-- 右侧基本资料表单 -->
        <div class="form-card">
            <div class="tabs">
                <div class="tab active">基本资料</div>
                <div class="tab">修改密码</div>
            </div>
            <form id="basicInfoForm" class="info-form">
                <div class="form-item">
                    <label>用户昵称<span class="required">*</span></label>
                    <input type="text" value="若依" required>
                </div>
                <div class="form-item">
                    <label>手机号码<span class="required">*</span></label>
                    <input type="tel" value="15888888888" required>
                </div>
                <div class="form-item">
                    <label>邮箱<span class="required">*</span></label>
                    <input type="email" value="ry@163.com" required>
                </div>
                <div class="form-item">
                    <label>性别</label>
                    <div class="radio-group">
                        <label>
                            <input type="radio" name="gender" value="male">
                            <span>男</span>
                        </label>
                        <label>
                            <input type="radio" name="gender" value="female" checked>
                            <span>女</span>
                        </label>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-save">保存</button>
                    <button type="button" class="btn-cancel">关闭</button>
                </div>
            </form>
			<form id="passwordForm" class="info-form">
			        <div class="form-item">
			            <label>旧密码<span class="required">*</span></label>
			            <input type="password" placeholder="请输入旧密码" required>
			        </div>
			        <div class="form-item">
			            <label>新密码<span class="required">*</span></label>
			            <input type="password" placeholder="请输入新密码" required>
			        </div>
			        <div class="form-item">
			            <label>确认密码<span class="required">*</span></label>
			            <input type="password" placeholder="请输入新密码" required>
			        </div>
			        <div class="form-actions">
			            <button type="submit" class="btn-save">保存</button>
			            <button type="button" class="btn-cancel">关闭</button>
			        </div>
			</form>
        </div>
    </div>
    <script src="js/personalcenter.js"></script>
</body>
</html>